<template>
  <div class="elcker-inter-login-main">
    <div class="elcker-inter-login-main-center">
      <el-card shadow="always">
        <el-row :gutter="2">
          <el-col class="elcker-inter-login-main-center-right" :span="24">
            <el-form
              :rules="userFormrules"
              ref="userForm"
              status-icon
              :model="userFormDatas"
            >
              <el-row class="elcker-inter-login-main-center-col">
                <el-col :span="24">
                  <el-divider>
                    <span
                      style="
                        font-size: 24px;
                        font-weight: bold;
                        letter-spacing: 3px;
                      "
                    >
                      用户登录
                    </span>
                  </el-divider>
                  <span
                    class="elcker-inter-login-main-center-col-form-spanmsg"
                    >{{ appMessage }}</span
                  >
                </el-col>
                <el-col :span="24">
                  <span class="elcker-inter-login-main-center-col-form-span">
                    <el-form-item prop="username">
                      <el-input
                        placeholder="请输入用户名"
                        clearable
                        v-model="userFormDatas.username"
                        name="用户名"
                      />
                    </el-form-item>
                  </span>
                  <span class="elcker-inter-login-main-center-col-form-span">
                    <el-form-item prop="password">
                      <el-input
                        placeholder="请输入密码"
                        v-model="userFormDatas.password"
                        show-password
                        name="密码"
                      />
                    </el-form-item>
                  </span>
                  <span class="elcker-inter-login-main-center-col-form-span01">
                    <el-checkbox v-model="userFormDatas.remembedMe"
                      >记住我
                    </el-checkbox>
                  </span>
                  <span class="elcker-inter-login-main-center-col-form-span">
                    <el-button
                      class="elcker-inter-login-main-center-col-form-subbut"
                      type="success"
                      v-if="!submitStatu"
                      @click="onSubmit"
                      >登录
                    </el-button>
                    <el-button
                      class="elcker-inter-login-main-center-col-form-subbut"
                      type="warning"
                      v-else
                      >登录中...
                    </el-button>
                  </span>
                </el-col>
                <el-col :span="24">
                  <el-divider>
                    <span style="letter-spacing: 4px; color: #666">
                      协议许可
                    </span>
                  </el-divider>
                  <span class="elcker-inter-login-main-center-col-form-span">
                    <el-link type="primary">查看用户协议说明</el-link>
                  </span>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    const validateUserName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        if (this.userFormDatas.username !== "") {
          this.$refs.userForm.validateField("username");
        }
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      const reg = /^[a-zA-Z]\w{8,18}$/;
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (!reg.test(value)) {
        callback(
          new Error("密码以字母开头 长度在8~18之间 只能包含字母、数字和下划线")
        );
      } else {
        if (this.userFormDatas.password !== "") {
          this.$refs.userForm.validateField("password");
        }
        callback();
      }
    };
    return {
      appMessage: "",
      submitStatu: false,
      jumpPath: process.env.VUE_APP_PAGE_HOME,
      userFormDatas: {
        username: "admin",
        password: "Abc123456",
        remembedMe: false,
      },
      userFormrules: {
        username: [{ validator: validateUserName, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  mounted() {
    // this.onSubmit();
  },
  methods: {
    onSubmit() {
      if (this.submitStatu) {
        return false;
      }
      // 1.设置不能重复点击
      this.submitStatu = true;
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          this.$store
            .dispatch("UserLogin", this.userFormDatas)
            .then(() => {
              // 跳转回来源页面
              //this.$route.params.redirect
              this.$router.push(this.jumpPath);
              this.submitStatu = false; // 提交完
            })
            .catch((error) => {
              this.submitStatu = false; // 提交完
              this.loginMessage = "系统繁忙，请稍后重试" + error;
            });
        } else {
          this.submitStatu = false;
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.elcker-inter-login-main {
  width: 100%;
  height: 100%; /*写给不支持calc()的浏览器*/
  height: -moz-calc(100vh);
  height: -webkit-calc(100vh);
  height: calc(100vh);
  background: url("../assets/elcker/imgs/login/loginbg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
}

.elcker-inter-login-main-center {
  width: 36%;
  height: 60%;
  width: -moz-calc(360vw);
  width: -webkit-calc(36vw);
  width: calc(36vw);
  height: -moz-calc(60vh);
  height: -webkit-calc(60vh);
  height: calc(60vh);
  position: absolute;
  margin-top: calc(15vh);
  margin-left: calc(60vw);
}

.el-card {
  width: 100%;
  height: 100%;
}
.elcker-inter-login-main-center-right {
  padding-top: 15px;
}
.elcker-inter-login-main-center-col {
  width: 78%;
  margin: 10% auto;
}

.elcker-inter-login-main-center-col-form-spanmsg {
  display: block;
  width: 90%;
  text-align: center;
  font-size: 13px;
  color: red;
}

.elcker-inter-login-main-center-col-form-span {
  padding: 10px 8%;
  display: block;
  width: 84%;
  text-align: center;
}

.elcker-inter-login-main-center-col-form-span01 {
  padding: 0px 10%;
  display: block;
  width: 80%;
}

.elcker-inter-login-main-center-col-form-subbut {
  padding: 10px;
  margin-top: 10px;
  display: block;
  width: 100%;
}
</style>
